import { Outlet } from "react-router-dom"
import { Select, Button, Form, DatePicker } from "antd";
import { SearchOutlined } from '@ant-design/icons';

import Dialog from "@/components/Dialog";
import React, { useState } from 'react';
import "./index.css"
const { Option } = Select;

const onChange = (value: string) => {
    console.log(`selected ${value}`);
};

const onSearch = (value: string) => {
    console.log('search:', value);
};
const ProductManagerment = () => {
    const [loadings, setLoadings] = useState<boolean[]>([]);
    const enterLoading = (index: number) => {
        const enterLoading = (index: number) => {
            setLoadings(prevLoadings => {
                const newLoadings = [...prevLoadings];
                newLoadings[index] = true;
                return newLoadings;
            });

            setTimeout(() => {
                setLoadings(prevLoadings => {
                    const newLoadings = [...prevLoadings];
                    newLoadings[index] = false;
                    return newLoadings;
                });
            }, 6000);
        }
    }

    return (
        <div className="product">
            <div className="search">
                产品名称：<Select
                    showSearch
                    placeholder="请输入品牌名称"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    }
                >
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="tom">Tom</Option>
                </Select>
                <Form.Item label="添加时间">
                    <DatePicker placeholder="请选择时间" />
                </Form.Item>
                <Button type="primary" icon={<SearchOutlined />}>
                    查询
                </Button>
            </div>
            <Outlet />
        </div>
    )
}

export default ProductManagerment